<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User Management</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script th:inline="javascript">
        $(document).ready(function () {
            $('form').submit(function (event) {
                event.preventDefault();
                const query = $('#query').val();
                $.get('/users/search/' + query, function (data) {
                    let tableBody = "";
                    tableBody += "<table><tr> <th>USER_ID</th>  <th>Username</th>  <th>CITY</th>  <th>AGE</th>  <th>SEX</th>  <th>PHONE</th>  <th>ADDRESS</th>  <th>操作</th></tr>";
                    for (let i = 0; i < data.length; i++) {
                        tableBody += "<tr>";
                        tableBody += "<td>" + data[i].userId + "</td>";
                        tableBody += "<td>" + data[i].username + "</td>";
                        tableBody += "<td>" + data[i].city + "</td>";
                        tableBody += "<td>" + data[i].age + "</td>";
                        tableBody += "<td>" + data[i].sex + "</td>";
                        tableBody += "<td>" + data[i].phone + "</td>";
                        tableBody += "<td>" + data[i].address + "</td>";
                        // tableBody += "<td>" + data[i].registerTime + "</td>";
                        tableBody += "<td><a href=\"/users/delete/";
                        tableBody += data[i].userId + "\">";
                        tableBody += "Delete<\/a></td>";
                        // tableBody += "<td><a href=\"/users/edit/";
                        // tableBody += data[i].userId +"\">";
                        // tableBody += "Edit<\/a></td>";
                        tableBody += "<td><a href=\"/userTag/";
                        tableBody += data[i].userId + "\">";
                        tableBody += "用户标签管理<\/a></td>";
                        tableBody += "<td><a href=\"/userProfile/";
                        tableBody += data[i].userId + "\">";
                        tableBody += "用户画像<\/a></td>";
                        tableBody += "</tr>";
                    }
                    tableBody += "</table>";
                    $('#search-results').html(tableBody);
                });
            });
        });
    </script>
</head>
<body>
<h1>User Management</h1>
<h2>搜索</h2>
<form th:action="@{users/search}" method="get">
    <input type="text" name="query" id="query" placeholder="输入搜索关键词">
    <button type="submit">搜索</button>
</form></br>
<h2>添加用户</h2>
<a th:href="@{/users/add}">Add User</a>
<h2>人群圈选</h2>
<a th:href="@{/circleSelect}">圈选</a>
<div th:if="${users != null and #lists.size(users) > 0}">
    <div id="search-results">
        <table>
            <tr>
                <th>USER_ID</th>
                <th>Username</th>
                <th>CITY</th>
                <th>AGE</th>
                <th>SEX</th>
                <th>PHONE</th>
                <th>ADDRESS</th>
<!--                <th>REGISTER_TIME</th>-->
                <th>操作</th>
            </tr>
            <tr th:each="user : ${users}">
                <td th:text="${user.userId}"></td>
                <td th:text="${user.username}"></td>
                <td th:text="${user.city}"></td>
                <td th:text="${user.age}"></td>
                <td th:text="${user.sex}"></td>
                <td th:text="${user.phone}"></td>
                <td th:text="${user.address}"></td>
<!--                <td th:text="${user.registerTime}"></td>-->
                <td>
<!--                    <a th:href="@{/users/edit/{id}(id=${user.userId})}">Edit</a>-->
                    <a th:href="@{/users/delete/{id}(id=${user.userId})}">Delete</a>
                    <a th:href="@{/userTag/{id}(id=${user.userId})}">用户标签管理</a>
                    <a th:href="@{/userProfile/{id}(id=${user.userId})}">用户画像</a>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>